<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS的背景</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        color: blueviolet;
        /*背景颜色*/
        /*background-color: transparent; 透明的。清澈的*/

        /*背景图片*/
        /*易于控制图片位置*/
        background-image: url(../image/gif1.00.gif);

        /*背景图片平铺*/
        background-repeat: no-repeat; /*不平铺*/
        /*默认情况下，背景图片是平铺的*/
        /*background-repeat: repeat-x; 沿着 x 轴平铺*/
        /*background-repeat: repeat-y;沿着 y 轴平铺*/
        /*页面元素既可以添加背景图片也可以添加背景颜色，只不过背景图片会压住背景颜色
        background-color: red;*/

        /*
        背景图片位置
        background-position: x y;
        参数代表意思是：x 坐标和 y 坐标。可以使用方位名词或者精确单位
        方位名词：top,center,bottom,left,right 
        两个值都是方位名词，前后顺序无关
        比如：底部居中
        background-position: center bottom;
        background-position: bottom center;
        如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
        background-position: right;
        background-position: top;

        参数是精确值
        1.那么第一个肯定是 x 坐标，第二个一定是 y 坐标
        2.如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
        background-position: 20px 20px;
        background-position: 10px;

        混合单位
        那么第一个肯定是 x 坐标，第二个一定是 y 坐标
        background-position: center 20px;
        background-position: 10px center;

        背景图像固定
        scroll  背景图像是随对象内容滚动的
        fixed   背景图像固定
        */

        /*
        背景色半透明 
        内容不改变，背景颜色半透明
        background:rgba(0,0,0,0.3)
        最后一个参数是 alpha 透明度，取值范围在 0 ~ 1 之间
        background: rgba(0, 0, 0, 0.3);
        习惯把0.3的 0 省略掉
        */
        background: rgba(0, 0, 0, 0.3);
      }
      h3 {
        width: 118px;
        height: 40px;
        /*background-color: pink;*/
        font-size: 14px;
        font-weight: normal; /*不加粗*/
        line-height: 40px;
        background-image: url(../image/icon.png);
        background-repeat: no-repeat;
        background-position: left center;
        text-indent: 2em;
      }
      body {
        /*超大背景图片*/
        /*
        background-image: url(../image/bg.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        color: purple;
        font-size: 20px;
        内容动，背景图像不动
        background-attachment: fixed;
         背景图像随内容而滚动
        background-attachment: scroll;

        背景复合写法
        一般写法：
        background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
        */
        background: #000 url(../image/bg.jpg) no-repeat fixed center top;
      }
    </style>
  </head>
  <body>
    <div>隐形的翅膀</div>
    <h3>成长守护平台</h3>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>

    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>
    <p>影，我的大老婆</p>

    <p>影，我的大老婆</p>
  </body>
</html>
